<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>主页-880文档</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="keywords" content="在线文档，电子书">
    <meta name="description" content="880在线文档电子书管理系统">
    <meta name="author" content="位中原">
    <title>系统主页 - www.880.xin</title>
    <link href="/common/images/favicon32.ico" rel="icon" type="image/x-icon" />
    <link href="/common/images/favicon32.ico" rel="shortcut icon" type="image/x-icon" >
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link href="/common/libs/materialdesignicons/materialdesignicons.min.css" rel="stylesheet" type="text/css">
    <link href="/common/libs/bootstrap5.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/front/common/header/css/header.css" rel="stylesheet" type="text/css">
    <link href="/front/index/css/index.css" rel="stylesheet" type="text/css">
    <link href="/front/common/footer/css/footer.css" rel="stylesheet" type="text/css">

    <script src="/common/libs/jquery/jquery-3.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container-fluid index-css">
    <!-- 页头-开始 -->
    <#include "/front/common/header.ftl">
    <@header />
    <!-- 页头-结束 -->
    <!-- 搜索引擎-开始 -->
    <div class="row d-flex justify-content-center align-items-center" style="background-color: #8a9bb8;">
        <style>
            /*========首页搜索======*/
            .primary-menus {
                /*width:50%;position:absolute;top:55%;left:50%;z-index:3;transform: translate(-50%, -50%);font-size: 16px;opacity: .95;*/
            }
            .primary-menus ul {list-style:none;padding:0;}
            .primary-menus ul li {display:inline-block;color:#fff;padding:0 14px;height:36px;line-height:36px;font-size:14px;border-top-left-radius:3px;border-top-right-radius:3px;cursor:pointer;}
            .primary-menus ul li:first-child {cursor:auto;color: rgba(255,255,255,.8);}
            .primary-menus ul li:first-child:hover {color: rgba(255,255,255,.8);background-color:transparent;}
            .primary-menus ul li:hover {background:#fff;color:#3c3c3c;opacity:.8;}
            .primary-menus ul li.current {background:#fff;color:#3c3c3c;}
            .primary-menus .cont {position:relative;top:-1px;}
            .primary-menus .right-link {position:absolute;right:0;top:0;}
            .primary-menus .right-link a {display:inline-block;margin-top:10px;padding-right:5px;color:#dff2ff;text-decoration:none;font-size:13px;}
            .primary-menus .right-link a:hover {color:#fff;}
            .primary-menus .left-cont {}
            .primary-menus .left-cont .search.hidden {display:none;}
            .primary-menus .left-cont form {width:100%;position:relative;}
            .primary-menus .left-cont input {box-sizing:border-box;width:100%;border:none;font-size:15px;line-height:20px;height:48px;padding:11px 100px 11px 26px;border-radius:3px;color:#9f9f9f;outline:none;}
            .primary-menus .left-cont input:focus {color:#3c3c3c;}
            .primary-menus .left-cont button {height:48px;box-sizing:border-box;min-width:100px;margin-left:-5px;cursor:pointer;background-color:#e34f4f;color:#fff;font-size:15px;line-height:40px;border-top-right-radius:3px;border-bottom-right-radius:3px;position:absolute;right:1px;top:0;border: 5px solid #fff;  border-radius: 9px;padding: 0 15px;}
            .primary-menus .left-cont button:hover {background-color:#ff3636;}
            @media (max-width:1199px) {.primary-menus ul li {padding:0 12px;}
            }
            @media (max-width:991px) {.primary-menus {float:left;margin-left:0;width:90%;top: 60%;}
                .primary-menus .right-link {display:none;}
                .primary-menus .left-cont {margin-right:0;}
            }
            @media (max-width:767px) {.primary-menus ul li {padding:0 5px;font-size:13px;height:28px;line-height:24px;margin-right:6px;}
                .primary-menus ul li:first-child {display:none;}
                .primary-menus .left-cont input {height:34px;line-height:14px;font-size:13px;padding:10px 6em 10px 10px;border-radius:0 3px 3px 3px;}
                .primary-menus .left-cont button {height:34px;line-height:34px;width:6em;font-size:12px;border: none;border-radius: 2px;margin-right: -2px;}
            }
        </style>


        <div class="col-6 m-5 primary-menus">
            <ul class="selects">
                <li>常用</li>
                <li class="current" data-target="search_1"><span>百度</span></li>
                <li data-target="search_2"><span>Bing</span></li>
                <li data-target="search_3"><span>360</span></li>
                <li data-target="search_4"><span>搜狗</span></li>
                <li data-target="search_5"><span>天猫</span></li>
                <li data-target="search_6"><span>淘宝</span></li>
                <li data-target="search_7"><span>知乎</span></li>
                <li data-target="search_8"><span>站内</span></li>
            </ul>
            <div class="cont">
                <div class="left-cont">
                    <form class="search" id="search_1" action="https://www.baidu.com/s?wd=" method="get" target="_blank">
                        <input type="text" name="wd" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">百度搜索</button>
                    </form>
                    <form class="search hidden" id="search_2" action="https://cn.bing.com/search?q=" method="get" target="_blank">
                        <input type="text" name="q" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">Bing搜索</button>
                    </form>
                    <form class="search hidden" id="search_3" action="https://www.so.com/s?q=" method="get" target="_blank">
                        <input type="text" name="q" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">360搜索</button>
                    </form>
                    <form class="search hidden" id="search_4" action="https://www.sogou.com/web?query=" method="get" target="_blank">
                        <input type="text" name="query" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">搜狗搜索</button>
                    </form>
                    <form class="search hidden" id="search_5" action="https://list.tmall.com/search_product.htm?q=" method="get" target="_blank">
                        <input type="text" name="q" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">天猫搜索</button>
                    </form>
                    <form class="search hidden" id="search_6" action="https://s.taobao.com/search?q=" method="get" target="_blank">
                        <input type="text" name="q" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">淘宝搜索</button>
                    </form>
                    <form class="search hidden" id="search_7" action="https://www.zhihu.com/search?q=" method="get" target="_blank">
                        <input type="text" name="q" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">知乎搜索</button>
                    </form>
                    <form method="post" name="searchform" class="search hidden" id="search_8" target="_blank" action="/e/search/index.php" >
                        <input type="text" name="keyboard" class="s" placeholder="请输入关键词">
                        <button type="submit" name="" class="btn">站内搜索</button>
                        <input type="hidden" value="title" name="show">
                        <input type="hidden" value="1" name="tempid">
                        <input type="hidden" value="daohang" name="tbname">
                        <input name="mid" value="1" type="hidden">
                        <input name="dopost" value="search" type="hidden">
                    </form>
                </div>
            </div>
        </div>


        <script>

            //搜索选择
            (function($){
                var m=$('.primary-menus');
                if(m.length<1) return;
                var ul=m.find('.selects');
                if(ul.length<1) return;
                var lis=ul.children('li');
                if(lis.length<1) return;
                var s=m.find('.search');
                var sVal=s.find('.s').val();
                lis.on('click',function () {
                    var d=$(this).attr('data-target');
                    if (d) {
                        lis.removeClass('current');
                        $(this).addClass('current');
                        s.addClass('hidden');
                        s.filter('#'+d).removeClass('hidden');
                        //s.filter('#'+d).find('.s').val('');
                        s.filter('#'+d).find('.s').trigger('focusin');
                    }
                });
                s.find('.s').on('focusin',function () {
                    if ($(this).val()==sVal) {
                        $(this).val('');
                    }
                })
                s.find('.s').on('focusout',function () {
                    var v=$(this).val();
                    if (orz.isEmpty(v)) {
                        v=sVal;
                    }
                    s.find('.s').val(v);
                })
            })(jQuery);
        </script>
    </div>
    <!-- 搜索引擎-结束 -->
    <!-- 推荐-开始 -->
    <div class="recommend">

    </div>


    <div class="scrolllist" id="recommend">
        <a class="abtn aleft" href="#left" title="左移"></a>
        <div class="imglist_w" id="imgListWidth">
            <ul class="imglist">
                <#if bookList??>
                <#list bookList as book>
                <li>
                    <a target="_blank" href="/details?bookId=${book.id}" target="_blank" title="${book.title}"><img width="150" height="150" alt="${book.title}" src="<#if (book.coverImage) != '' && (book.coverImage)??>${book.coverImage}<#else>/front/index/images/880.png</#if>" /></a>
                    <p><a target="_blank" href="/details?bookId=${book.id}" target="_blank">${book.title}</a></p>
                </li>
                </#list>
                </#if>

            </ul><!--imglist end-->
        </div>
        <a class="abtn aright" href="#right" title="右移"></a>
    </div>
    <!-- 推荐-结束 -->

    <!-- main-开始 -->
    <div class="main">


        <!-- 锚点导航-开始 -->
        <div class="anchor">
            <div class="anchor-title"><i class="mdi mdi-menu"></i>&nbsp分类菜单</div>
            <ul class="list-group">
                <#if bookCategoryList??>
                <#list bookCategoryList as category>
                <#if category.parentId == 0>
                <li class="list-group-item"><a class="h_sco" href="#mao_${category.id}">${category.name}</a></li>
                </#if>
                </#list>
                </#if>
            </ul>
        </div>
        <!-- 锚点导航-结束 -->

        <!-- 锚点楼层-开始 -->
        <div class="floor">
            <#if bookCategoryList??>
            <#list bookCategoryList as category>
            <#if category.parentId == 0>
            <div id="mao_${category.id}" class="contentFloor">
                <div class="category"><i class="mdi mdi-bookshelf"></i>&nbsp${category.name}</div>
                <div class="row children-category">
                    <#list category.childrenCategoryList as childrenCategory>
                    <div class="col-4">
                        <div class="row children-category-box" onclick="window.open('/books?categoryId=${childrenCategory.id}','_self')">
                            <div class="col-1 children-category-box-img"><img src="<#if (childrenCategory.coverImage) != '' && (childrenCategory.coverImage)??>${childrenCategory.coverImage}<#else>/front/index/images/880.png</#if>"></div>
                            <div class="col-10 children-category-box-txt">
                                <div class="children-category-title single-line-ellipsis">${childrenCategory.name}</div>
                                <div class="children-category-description single-line-ellipsis">${childrenCategory.description}</div>
                            </div>
                        </div>

                    </div>
                    </#list>
                </div>
            </div>
            </#if>
            </#list>
            </#if>
        </div>
        <!-- 锚点楼层-结束 -->
    </div>
    <!-- main-结束 -->
    <!-- 页脚-开始 -->
    <#include "/front/common/footer.ftl">
    <@footer />
    <!-- 页脚-结束 -->
</div>
<script src="/common/libs/bootstrap5.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/front/index/js/index.js" type="text/javascript"></script>
<script src="/common/libs/slider01/js/slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        var slider = document.getElementById('recommend');
        var imglist = document.getElementById('imgListWidth');
        slider.style.width = (document.documentElement.clientWidth-20)+'px';
        imglist.style.width  = (document.documentElement.clientWidth - 20 - 38)+'px';
        /* 走马灯-开始 */
        $("#recommend").xslider({
            unitdisplayed:4,
            movelength:1,
            unitlen:176,
            autoscroll:3000
        });
        /* 走马灯-结束 */

    })
</script>
</body>
</html>